<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改"
    width="1000"
    :before-close="() => visibleChange(false)"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="140px"
      :size="formSize"
      status-icon
    >
      <el-divider :border-style="'dashed'" content-position="left"
        ><span class="divider-text">公司信息</span></el-divider
      >
      <el-form-item label="公司名称" prop="company" style="width: 450px">
        <el-input
          v-model="ruleForm.company"
          show-word-limit
          maxlength="30"
          placeholder="请输入公司名称"
          disabled
        />
      </el-form-item>
      <el-form-item label="公司简介" prop="companyInfo" style="width: 800px">
        <el-input
          v-model="ruleForm.companyInfo"
          autosize
          show-word-limit
          maxlength="300"
          type="textarea"
          placeholder="简单介绍一下公司吧~"
        />
      </el-form-item>
      <el-divider
        class="divider"
        :border-style="'dashed'"
        content-position="left"
        ><span class="divider-text">实习信息</span></el-divider
      >
      <el-row>
        <el-col :span="12">
          <el-form-item label="岗位名称" prop="station" style="width: 450px">
            <el-input
              v-model="ruleForm.station"
              show-word-limit
              maxlength="20"
              placeholder="请输入岗位名称"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实习部门" prop="department" style="width: 450px">
            <el-input
              v-model="ruleForm.department"
              placeholder="请输入实习部门"
              show-word-limit
              maxlength="20"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实习地址" prop="address" style="width: 450px">
            <el-input
              v-model="ruleForm.address"
              show-word-limit
              maxlength="50"
              placeholder="请输入实习地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="薪资待遇" prop="salary" style="width: 450px">
            <el-input
              v-model="ruleForm.salary"
              show-word-limit
              maxlength="20"
              placeholder="请输入薪资待遇"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="工作内容" prop="work" style="width: 800px">
        <el-input
          v-model="ruleForm.work"
          autosize
          show-word-limit
          maxlength="500"
          type="textarea"
          placeholder="每条要求之间请按回车换行：实习生入职后从事哪些工作内容"
        />
      </el-form-item>
      <el-form-item
        label="实习/岗位要求"
        prop="requirement"
        style="width: 800px"
      >
        <el-input
          v-model="ruleForm.requirement"
          autosize
          show-word-limit
          maxlength="500"
          type="textarea"
          placeholder="每条要求之间请按回车换行：对学校、专业、实习时长、技能、能力、兴趣......的要求"
        />
      </el-form-item>
      <el-form-item label="实习生收获" prop="obtained" style="width: 800px">
        <el-input
          v-model="ruleForm.obtained"
          type="textarea"
          autosize
          show-word-limit
          maxlength="200"
          placeholder="实习生可以收获到什么？"
        />
      </el-form-item>
      <el-divider
        class="divider"
        :border-style="'dashed'"
        content-position="left"
        ><span class="divider-text">简历投递</span></el-divider
      >
      <el-row>
        <el-col :span="12">
          <el-form-item label="简历投递邮箱" prop="email" style="width: 450px">
            <el-input
              v-model="ruleForm.email"
              show-word-limit
              maxlength="50"
              placeholder="请输入简历投递邮箱"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="邮件主题及附件"
            prop="emailFormat"
            style="width: 450px"
          >
            <el-input
              v-model="ruleForm.emailFormat"
              placeholder="例:姓名－学校－专业－每周实习天数"
              show-word-limit
              maxlength="50"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="notes" style="width: 800px">
        <el-input
          v-model="ruleForm.notes"
          type="textarea"
          autosize
          show-word-limit
          maxlength="200"
          placeholder="备注"
        />
      </el-form-item>
      <el-form-item label="截止时间" prop="expire" style="width: 450px">
        <el-date-picker
          v-model="ruleForm.expire"
          type="date"
          label="简历投递截止时间"
          placeholder="简历投递截止时间"
          style="width: 100%"
          format="YYYY-MM-DD"
          value-format="x"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => visibleChange(false)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from "vue";
import { apiEditPractice } from "../../apis/practiceApi";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const props = defineProps({
  visibleChange: {
    type: Function,
    required: true,
  },
  formData: {
    type: Object,
    required: true,
  },
});
const dialogVisible = ref(true);
const formSize = ref("default");
const ruleFormRef = ref();

const ruleForm = reactive(props.formData);
//     {
//   company: "", //公司名称
//   department: "", //实习部门
//   address: "", //工作地址
//   work: "", //工作内容
//   requirement: "", //实习要求
//   salary: null, //薪资待遇
//   station: "", //岗位
//   companyInfo: "", //公司简介
//   email: "", //邮箱
//   notes: "", //备注
//   emailFormat: "姓名－学校－专业－每周实习天数", //邮件主题及附件
//   obtained: "", //实习收获
//   expire: nowDate.setMonth(nowDate.getMonth() + 6), //简历投递截止时间
// }

const rules = reactive({
  company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  work: [
    {
      required: true,
      message: "请输入工作内容",
      trigger: "change",
    },
  ],
  requirement: [
    {
      required: true,
      message: "请输入实习/岗位要求",
      trigger: "change",
    },
  ],
  station: [
    {
      required: true,
      message: "请输入岗位名称",
      trigger: "change",
    },
  ],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  emailFormat: [{ required: true, message: "请输入邮箱格式", trigger: "blur" }],
  expire: [{ required: true, message: "请输入截止日期", trigger: "blur" }],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      apiEditPractice({
        ...ruleForm,
      }).then((res) => {
        if (res.code > 0) {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          props.visibleChange(false);
        } else {
          ElMessage({
            message: "修改失败",
            type: "error",
          });
        }
      });
    }
  });
};
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.divider {
  margin-top: 50px;
}

.divider-text {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-weight: 600;
}
</style>
